<template>
  <div>
    <!-- 底下这些结构都是ElementUI插件提供的 -->
    <el-button type="primary" icon="el-icon-plus" v-if="$isShowBtn('btn.Trademark.add')" @click="addTradeMark">添<i class="el-icon-s-opportunity"></i>加</el-button>
    <!-- 表格
         el-table:  border 加外边框  data属性,属性值务必是数组  prop 对应列内容的字段名
         el-table-column:label 设置每一列的表头
                         width 设置每一列的快递         
       -->
    <el-table
      style="width: 100%; margin: 20px 0px"
      border
      :data="trademark.records"
    >
      <!-- 代表第一列展示索引值:从数字1开始 -->
      <el-table-column
        type="index"
        label="序号"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="tmName"
        label="品牌名称"
        width="width"
      ></el-table-column>
      <!-- el-table-column:人家element-ui已经封装好组件，人家已经在内部'留坑' -->
      <el-table-column label="品牌LOGO" width="width">
        <!-- 当前组件:人家已经把'坑'留好了,只需要填坑即可 -->
        <template slot-scope="{ row, $index }">
          <img :src="row.logoUrl" style="width: 100px" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="width">
        <template v-slot="{ row, $index }">
          <!-- v-slot与slot-scope作用一样的 -->
          <el-button
            type="warning"
            size="mini"
            icon="el-icon-edit"
            @click="updateTradeMark(row)"
            >修改</el-button
          >
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="考虑"
            icon="el-icon-delete"
            icon-color="#409eff"
            :title="`你确定删除${row.tmName}?`"
            @onConfirm="confirm(row)"
          >
            <el-button
              slot="reference"
              size="mini"
              type="danger"
              style="margin: 0px 10px"
              icon="el-icon-delete"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 
          el-pagination分页器组件
          current-page:分页器当前页码
          page-size 一页展示几条数据
          total：一共多少条数据
          page-sizes:用户可以选择一页展示多少条数据下拉菜单数据设置
          layout:调整分页器布局的
          current-change:当前页码发生变化的事件
          size-change:每一页几条数据发生变化的回调
       -->
    <el-pagination
      style="text-align: center"
      @current-change="getTradeMarkInfo"
      @size-change="sizeHandler"
      :current-page="page"
      :page-sizes="[3, 5, 10]"
      :page-size="limit"
      prev-text="上一页"
      next-text="下一页"
      background
      :pager-count="7"
      layout="prev, pager,next,jumper,->,total,sizes"
      :total="trademark.total"
    >
    </el-pagination>
    <!-- 对话框 
       visible:用于控制对话框显示与隐藏的
       title设置左上角标题
    -->
    <el-dialog
      :title="tmForm.id ? '修改品牌' : '添加品牌'"
      :visible.sync="dialogFormVisible"
      ref="dialog"
    >
      <!--
         model属性:将表单数据收集到那个对象身上.它一般在做表单验证的时候有用[目前收集表单数据暂时看不出它的效果]
      -->
      <el-form :model="tmForm" :rules="rules" ref="form">
        <!-- label:设置表单域前面文字 -->
        <el-form-item label="品牌名称" label-width="80px" prop="tmName">
          <el-input autocomplete="off" v-model="tmForm.tmName"></el-input>
        </el-form-item>
        <el-form-item label="品牌LOGO" prop="logoUrl">
          <!-- 
            上传图片
            action:上传图片的地址,替换为咱们自己服务器的地址
            show-file-list:显示文件名字
            on-success	文件上传成功时的钩子
            before-upload 文件上传之前的钩子

           -->
          <el-upload
            class="avatar-uploader"
            action="/api/admin/product/upload"
            :show-file-list="true"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            drag
            ref="upload"
          >
            <img
              v-if="tmForm.logoUrl"
              :src="tmForm.logoUrl"
              class="avatar"
              style="width: 100%; height: 100%"
            />
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
              style="font-size: 16px"
              >此处支持拖拽</i
            >
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateTradeMark"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
//定义自定义校验规则
var checkTmName = (rule, value, callback) => {
  //value:自定义校验规则字段相应数值
  //callBack:校验字段以后,放行函数
  //rule:element提供对象,可以看到校验字段名、字段属性值是什么类型的
  //品牌校验规则:汉字{4,8}
  if (/^[\u4e00-\u9fa5]{4,8}$/.test(value)) {
    //代表验证通过
    callback();
  } else {
    callback(new Error("品牌名称4-8汉字"));
  }
};

//品牌LOGO自定义校验规则
const checkLogoUrl = (rule,value,cb)=>{
      //假装的校验规则
      if(value){
         cb();
      }else{
         cb(new Error('大哥请你选择品牌LOGO'))
      }
}


export default {
  name: "",
  data() {
    return {
      //默认参数:默认第一页
      page: 1,
      //默认参数：默认一页三条数据
      limit: 3,
      //品牌先关的数据
      trademark: {},
      //用于控制对话框显示与隐藏
      dialogFormVisible: false,
      //收集表单数据地方,将来带给服务器的参数
      tmForm: {
        tmName: "",
        logoUrl: "",
      },
      //表单验证规则
      rules: {
        //校验的字段
        tmName: [
          //自定义校验规则:validator用于设置校验规则  trigger:触发校验事件blur、change
          { required:true,validator: checkTmName, trigger: "blur" },
        ],
        //底下logoURL字段并非表单，trigger没有任何意义
        logoUrl: [{ required: true,validator: checkLogoUrl}],
      },
    };
  },
  mounted() {
    //组件挂载完毕,先获取一次品牌数据
    this.getTradeMarkInfo();
  },
  methods: {
    //获取品牌数据(分页器点击页码回调也是这个函数)
    async getTradeMarkInfo(pager = 1) {
      //每一次用户点击的时候再次整理参数
      this.page = pager;
      //整理参数
      const { page, limit } = this;
      //发请求
      let result = await this.$http.trademark.reqTradeMark(page, limit);
      if (result.code == 200) {
        this.trademark = result.data;
      }
    },
    //当前页,条数发生变化的回调
    sizeHandler(limit) {
      //整理参数
      this.limit = limit;
      //再次发请求
      this.getTradeMarkInfo();
    },
    //文件上传成功的钩子
    handleAvatarSuccess(res, file) {
      //res:上传图片成功以后,服务器返回信息【包含图片远程地址:学校那台服务器上图片地址】
      //file:图片信息
      this.imageUrl = res.data;
      //图片上传成功收集参数
      this.tmForm.logoUrl = res.data;
    },
    //文件上传成功之前
    beforeAvatarUpload(file) {
      //file:图片信息
      //判断:图片上传成功之前进行判断,是不是jpg图片，大小是不是小于2M
      //一般png|jpg
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //添加品牌按钮的回调
    addTradeMark() {
      this.dialogFormVisible = true;
      //每一次在展示对话框之前先清除上一次的数据
      this.tmForm = { tmName: "", logoUrl: "" };
      this.$nextTick(() => {
        //获取上传图片的的组件的VC:关闭图片列表名字
        this.$refs.upload.clearFiles();
        this.$refs.form.resetFields();
      });
    },
    //对话框里面确定按钮的回调
    addOrUpdateTradeMark() {
      //获取FOrm组件,全部验证规则通过以后在发请求
      this.$refs.form.validate(async (success) => {
        //全部验证成功干啥
        if (success) {
          //整理参数
          let data = this.tmForm;
          //发请求
          try {
            //添加|修改成功
            await this.$http.trademark.reqAddOrUpdateTradeMark(data);
            //关闭对话框
            this.dialogFormVisible = false;
            //再次获取添加|修改完毕以后最新品牌的数据
            //如果是修改留在当前页，如果是新增留在第一个
            this.getTradeMarkInfo(this.tmForm.id ? this.page : 1);
            //消息提示框插件
            this.$message({
              message: this.tmForm.id ? "修改品牌成功" : "新增品牌成功",
              type: "success",
            });
          } catch (error) {
            this.$message({
              message: this.tmForm.id ? "修改品牌失败" : "新增品牌失败",
              type: "error",
            });
          }
        } else {
          //验证有失败的汉莎
          console.log("error submit!!");
          return false;
        }
      });
    },
    //修改品牌的方法
    updateTradeMark(row) {
      //对话框弹出来
      this.dialogFormVisible = true;
      //  this.tmForm = {tmName:'',logoUrl:''};
      //修改品牌的数据进行展示，赋值给tmForm即可！！
   
      //每一次点击修改按钮的文件列表名清空
      this.$nextTick(() => {
        //获取上传图片的的组件的VC:关闭图片列表名字
        this.$refs.upload.clearFiles();
        //重置表单:使用初始值
        this.$refs.form.resetFields();
        //在修改数值
        this.tmForm = { ...row };
      });

  
    },
    //删除的回调
    async confirm(row) {
      //发请求,通知服务器删除选中商品
      try {
        //删除成功,还要再次获取最新的品牌数据展示
        await this.$http.trademark.reqDeleteTradeMark(row.id);
        //判断删除以后留在那一页
        this.getTradeMarkInfo(
          this.trademark.records.length > 1 ? this.page : this.page - 1
        );
      } catch (error) {}
    },
  },
};

</script>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style scoped lang="scss">
   
  ::v-deep .number{
      color:red !important;
   }
</style>

